<template>
  <div
    class="WorkingSchedule"
    v-loading="loading"
    element-loading-text="正在加载中"
  >
    <el-tabs type="border-card" v-model="activeName">
      <el-form ref="form" :model="form" label-position="top" class="myform">
        <div>
          <el-form-item label="加工厂" class="myform-item">
            <el-select
              :disabled="activeName == 2"
              v-model="form.supplier_id"
              placeholder="请选择"
              @change="onChange"
              clearable
            >
              <el-option
                v-for="item in factoryList"
                :key="item.supplier_id"
                :label="item.factory_name"
                :value="item.supplier_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年月" class="myform-item">
            <el-date-picker
              :disabled="activeName == 2"
              v-model="form.date"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
              @change="onChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="品牌" class="myform-item">
            <el-select
              :disabled="activeName == 2"
              v-model="form.brand_code"
              placeholder="请选择"
              @change="onChange"
              clearable
            >
              <el-option
                v-for="item in brands"
                :key="item.brand_code"
                :label="item.brand_name"
                :value="item.brand_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" class="myform-item" v-if="activeName == 1">
            <el-select
              v-model="form.k_status"
              placeholder="请选择"
              @change="onChange"
              clearable
            >
              <el-option label="未抵扣" value="0"></el-option>
              <el-option label="已抵扣" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <el-tab-pane label="违约金/赔偿金" name="1" disabled>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          ref="multipleTable"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="生产加工单号"
            align="center"
            prop="processing_code"
          ></el-table-column>
          <el-table-column
            label="采购单号"
            align="center"
            prop="po_id"
          ></el-table-column>
          <el-table-column
            label="款号"
            align="center"
            prop="type_no"
          ></el-table-column>
          <el-table-column
            label="工厂"
            align="center"
            prop="factory_name"
          ></el-table-column>
          <el-table-column
            label="大货成衣成本加价总价"
            align="center"
            prop="contract_machining_price"
          ></el-table-column>
          <el-table-column
            label="实付成衣成本加价总价"
            align="center"
            prop="pay_machining_price"
          ></el-table-column>

          <el-table-column label="数量" align="center" prop="num">
            <template slot-scope="{ row }">
              <div style="color: red">-{{ row.num }}</div>
            </template>
          </el-table-column>
          <el-table-column label="返修退款金额" align="center" prop="amount">
            <template slot-scope="{ row }">
              <div style="color: red">-{{ row.amount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="k_status">
            <template slot-scope="{ row }">
              <div
                :style="{
                  color: row.k_status == 2 ? '#67C23A' : '',
                }"
              >
                {{
                  row.k_status == 0
                    ? "未抵扣"
                    : row.k_status == 2
                    ? "已抵扣"
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :form="form"
          :total="total"
          @paginationPostOrderTaskList="postAdminPricingGetRepairRefundList"
        />
      </el-tab-pane>
      <el-tab-pane label="回货单" name="2" disabled>
        <el-table
          :data="tableDataList"
          style="width: 100%"
          border
          ref="multipleTableTwo"
          @selection-change="handleSelectionChangeTwo"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            label="生产加工单号"
            align="center"
            prop="processing_code"
          ></el-table-column>
          <el-table-column
            label="采购单号"
            align="center"
            prop="po_id"
          ></el-table-column>
          <el-table-column
            label="款号"
            align="center"
            prop="type_no"
          ></el-table-column>
          <el-table-column
            label="大货成衣成本加价总价"
            align="center"
            prop="contract_price"
          ></el-table-column>
          <el-table-column
            label="实付成衣成本加价总价"
            align="center"
            prop="pay_price"
          ></el-table-column>

          <el-table-column label="数量" align="center" prop="totalnum">
            <!-- <template slot-scope="{ row }">
              <div style="color: red">-{{ row.num }}</div>
            </template> -->
          </el-table-column>
          <!-- <el-table-column label="状态" align="center" prop="k_status">
            <template slot-scope="{ row }">
              <div
                :style="{
                  color: row.k_status == 2 ? '#67C23A' : '',
                }"
              >
                {{
                  row.k_status == 0
                    ? "未抵扣"
                    : row.k_status == 2
                    ? "已抵扣"
                    : ""
                }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column
            label="货款金额（含税）"
            align="center"
            prop="cost_amount"
          ></el-table-column>
        </el-table>
        <pagination
          :form="formTwo"
          :total="totalTwo"
          @paginationPostOrderTaskList="postAdminPricinggetRepairRefundList_rp"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="step">
      <div class="step-button">
        <el-button
          type="primary"
          size="default"
          v-if="activeName == 2"
          @click="stepComplete"
          >提交生产返修退款对账单</el-button
        >
      </div>
      <div class="step-button" style="margin-right: 20px">
        <el-button
          size="default"
          @click="stepCompleteOne"
          :disabled="activeName == 1 && !(form.supplier_id && form.date && form.brand_code) "
          >{{ activeName == 1 ? "下一步" : "上一步" }}</el-button
        >
      </div>
      <!-- <div class="step-button" style="margin-right: 20px">
        <el-button size="default" @click="stepCompleteOne">{{
          activeName == 1 ? "下一步" : "上一步"
        }}</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
import {
  postAdminPricingGetRepairRefundList,
  postHomeCodeGetFactory,
  postAdminPricinggetPurchaseinBrand_code,
  postAdminPricingaddRepairRefundList_new,
  postAdminPricinggetRepairRefundList_rp,
  postAdminPricingaddRepairRefundList_rp,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      factoryList: [],
      brands: [],
      activeName: "1",
      form: {
        supplier_id: "",
        date: "",
        brand_code: "",
        k_status: "0",
        page: 1,
        size: 10,
      },
      tableData: [],
      total: 0,
      formTwo: {
        supplier_id: "",
        date: "",
        brand_code: "",
        page: 1,
        size: 10,
      },
      tableDataList: [],
      totalTwo: 0,
      multipleSelection: [],
      multipleSelectionTwo: [],
    };
  },
  async mounted() {
    // this.form = {
    //   supplier_id: "",
    //   date: "",
    //   brand_code: "",
    //   k_status: "0",
    //   page: 1,
    //   size: 10,
    // };
    // this.tableData = [];
    // this.factoryList = [];
    // this.brands = [];
    // this.multipleSelection = [];
    // this.multipleSelectionTwo = [];
    this.postHomeCodeGetFactory();
    this.postAdminPricinggetPurchaseinBrand_code();
  },
  methods: {
    // 返修单回货列表
    async postAdminPricinggetRepairRefundList_rp() {
      let { form, formTwo } = this;
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(form));
      formTwo.date = obj.date;
      formTwo.supplier_id = obj.supplier_id;
      formTwo.brand_code = obj.brand_code;
      postAdminPricinggetRepairRefundList_rp(formTwo)
        .then((res) => {
          this.loading = false;
          console.log("回货单统计列表", res);
          this.tableDataList = res.data;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    stepCompleteOne() {
      let { activeName } = this;
      if (activeName == 1) {
        this.postAdminPricinggetRepairRefundList_rp();
        this.activeName = "2";
      } else {
        this.activeName = "1";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChangeTwo(val) {
      this.multipleSelectionTwo = val;
    },
    async postAdminPricinggetPurchaseinBrand_code() {
      let res = await postAdminPricinggetPurchaseinBrand_code();
      this.brands = res.data;
    },
    // 回货单统计列表
    async postAdminPricingGetRepairRefundList() {
      this.loading = true;
      let form = JSON.parse(JSON.stringify(this.form));
      // form.k_status = 0
      postAdminPricingGetRepairRefundList(form)
        .then((res) => {
          this.loading = false;
          console.log("回货单统计列表", res);
          this.tableData = res.data;
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 改变时
    onChange() {
      let form = this.form;
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTableTwo.clearSelection();
      this.multipleSelection = [];
      if (form.supplier_id && form.date && form.brand_code) {
        this.postAdminPricingGetRepairRefundList();
      }
    },
    // 加工厂列表
    postHomeCodeGetFactory() {
      let obj = {
        type: 1,
        page: 1,
        size: 1000,
      };
      postHomeCodeGetFactory(obj).then((res) => {
        this.factoryList = res.data;
      });
    },

    // 搜索
    onSearch() {
      this.postAdminPricingGetRepairRefundList();
    },

    // 提交
    stepComplete() {
      let { multipleSelection, form, multipleSelectionTwo } = this;
      console.log("form--->", form);
      let obj = {
        ids: [],
      };
      let ids = [];
      obj.date = form.date;
      obj.supplier_id = form.supplier_id;
      obj.brand_code = form.brand_code;
      if (multipleSelection.length) {
        multipleSelection.forEach((e) => {
          if (e.id) {
            ids.push(e.id);
          }
        });
      }
      let idsTwo = [];
      multipleSelectionTwo.forEach((e) => {
        if (e.id) {
          idsTwo.push(e.id);
        }
      });
      this.postAdminPricingaddRepairRefundList_new(obj, ids, idsTwo);
    },
    async postAdminPricingaddRepairRefundList_new(obj, ids, idsTwo) {
      this.$alert(`即将生成${obj.date}的返修退款对账单`, "提示", {
        confirmButtonText: "确定",
        callback: async (action) => {
          obj.ids = ids;
          let res = await postAdminPricingaddRepairRefundList_new(obj);
          obj.ids = idsTwo;
          obj.id = res.data;
          await postAdminPricingaddRepairRefundList_rp(obj);
          this.$router.go(-1);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.step {
  height: 100px;
  &-button {
    padding-top: 40px;
    float: right;
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
